@charset 'UTF-8';
@import '../../config/scss/function.scss', '../../config/scss/config.scss';

.orderDetail {
    // 面包屑的样式
    .breadcrumb-row {
        margin-top: 10px;

        .breadcrumb {
            background-color: $mt_c_default;

            li {
                a {
                    color: $mt_c_main;
                }

                &:first-child {
                    a {
                        color: $mt_c_third;
                    }
                }
            }

            .li-1::before {
                content: '>' !important;
            }

            .li-2::before {
                content: '|' !important;
            }
        }
    }
    // 内容板块的样式
    .content-row {
        .state-list-group {
            // 竖排状态栏的样式
            .list-group-item {
                text-align: center;
                padding: 0;
                border-radius: 0;
                border: 0;
                padding-bottom: 35px;

                &:last-child {
                    padding-bottom: 10px;

                    &::after {
                        content: '';
                    }
                }
                // 伪标签的样式
                &::after {
                    content: '......';
                    position: absolute;
                    transform: rotate(90deg);
                    top: 40px;
                    left: 43%;
                }
                // 圆圈的样式
                .cricle {
                    margin: 0 auto 5px;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background-color: $mt_c_default;
                    border: 2px solid $mt_c_fourth;
                    overflow: hidden;
                }
                // 标签的样式
                &.disabled {
                    background-color: $mt_c_main;
                    color: $mt_c_default;
                    padding: 15px 0;
                    margin-bottom: 10px;

                    &::after {
                        content: '';
                    }
                }
            }

            .active.list-group-item {
                background-color: $mt_c_default;
                color: #333;
                border: 0;

                .cricle {
                    border-color: $mt_c_main;
                }

                span {
                    color: $mt_c_main;
                }

                &::after {
                    color: $mt_c_main;
                }
            }
        }
        // 面板的通用样式
        .panel {
            border: 1px solid $mt_c_border;
            border-radius: 0;

            .panel-heading {
                h4 {
                    color: $mt_c_second;
                    border-left: 3px solid $mt_c_main;
                    padding-left: 10px;
                }
            }

            .panel-body {}
        }
        // 最新进展的样式
        .new-step-row {
            // 取消按钮样式
            .cancel-block {
                color: $mt_c_fourth;
                bottom: 0;

                .cancel-btn {
                    padding-left: 5px;
                    color: $mt_c_second;
                }
            }
            // 圆形头像
            .img-circle {
                width: 55px;
                height: 55px;
            }
            // 绿色的名字
            .name {
                color: $mt_c_main;
            }
            // 提醒文字
            .tip-info {
                color: $mt_c_fourth;
            }
            #previewul, .previewpicturelist, #previewul1 {
              margin: 0;
              padding: 0;
              list-style-type: none;
              li {
                float: left;
                margin: 10px 0;
                margin-right: 5px;
                img[id^=previewid], img {
                  width: 50px;
                  height: 50px;
                }
              }
            }

            .img-fang {
              width: 100%;
            }

            .icon-xing {
              color: $mt_c_fourth;
              &.active {
                color: $mt_c_main;
              }
            }

            .uploadImagePanel {
                margin-bottom: 20px;
              .panel {
                margin: 0px;
                .panel-body {
                    padding: 10px;
                    border-radius: 10px;
                    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
                    .margin-reset {
                        .col-sm-2 {
                            padding: 0px;
                        }
                        select {
                            height: 40px;
                            border: 0px;
                        }
                        .uploadImage {
                            img {
                                width: 40px;
                                height: 40px;
                                margin-right: 5px;
                            }
                        }
                        .more {
                            height: 40px;
                            line-height: 40px;
                        }
                    }
                }
              }
            }
        }
        // 订单详细的样式
        .order-detail-row {
            p {
                color: $mt_c_second;
            }
            // 编辑按钮的样式
            .edit-block {
                color: $mt_c_fourth;

                .edit-btn {
                    padding-left: 5px;
                    color: $mt_c_second;
                }
            }
        }
        // 留言板样式
        .comment-row {
            .comment-input {
                border-color: $mt_c_border !important;
            }

            .comment-list {
                color: $mt_c_third;
                border-bottom: 1px solid $mt_c_border;

                &:last-child {
                    border-bottom: 0;
                }
            }
        }
        // 订单日志的样式
        .record-row {
            .list-group-item {
                border-radius: 0 !important;
                border-left: 0;
                border-right: 0;
                padding-left: 0;

                &:last-child {
                    border-bottom: 0;
                }
            }

            ol {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }

            .previewhostroy {
                list-style-type: none;
                margin: 0;
                padding: 0;
                display: flex;
                flex-flow: row nowrap;

                li {
                    margin-left: 5px;
                    img {
                        width: 50px;
                    }

                    &:first-child {
                      margin-left: 0;
                    }
                }
            }
        }
    }

    #payModal {
        .form-group-line {
            padding-bottom: 17px;
            border: 0;
            border-bottom: 1px solid $mt_c_border;

            div {
                color: $mt_c_second;
                margin-top: 10px;
            }

            div.state {
                color: $mt_c_fourth;
            }

            div {
                .money1 {
                    color: $mt_c_warning;
                }

                .money2 {
                    color: $mt_c_second;
                }
            }
        }
    }
}
